<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<meta http-equiv="Cache-Control" content="no-cache"/>
<title>{yun:}$config.sy_webname{/yun} -  手机人才网</title>
<meta http-equiv="keywords" content="人才招聘,网络招聘,wap" />
<meta http-equiv="description" content="人才招聘网wap网站" />
<meta content="width=device-width, initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport" />
<meta name="MobileOptimized" content="240" />
<meta http-equiv="Expires" content="0" />
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="Pragma" content="no-cache" />
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="black" name="apple-mobile-web-app-status-bar-style" />
<link rel="stylesheet" href="{yun:}$config.sy_weburl{/yun}/app/template/wap/css/yun_wap_member.css?v={yun:}$config.cachecode{/yun}" type="text/css"/>
<link rel="stylesheet" href="{yun:}$config.sy_weburl{/yun}/app/template/wap/css/css.css?v={yun:}$config.cachecode{/yun}" type="text/css"/>
<script src="{yun:}$config.sy_weburl{/yun}/app/template/wap/js/prefixfree.min.js?v={yun:}$config.cachecode{/yun}" language="javascript"></script>
<script src="{yun:}$config.sy_weburl{/yun}/js/jquery-1.8.0.min.js?v={yun:}$config.cachecode{/yun}" language="javascript"></script>
<script src="{yun:}$wap_style{/yun}/js/layer/layer.m.js?v={yun:}$config.cachecode{/yun}" language="javascript"></script>
<script src="{yun:}$wap_style{/yun}/js/public.js?v={yun:}$config.cachecode{/yun}" language="javascript"></script> 
</head>
<body>
<!-- Content area -->
<div class="body_wap">
<header>
   <div class="header_bg {yun:}if $tplmoblie.color{/yun}bg{yun:}$tplmoblie.color{/yun}{yun:}/if{/yun}" > 
    <div class="header_h1">上传头像</div>
  </div>
 </header> 
<div class="main_member_body"> 
  <link rel="stylesheet" type="text/css" href="{yun:}$wap_style{/yun}/js/webapppic/css/cropper.min.css?v={yun:}$config.cachecode{/yun}"/> 
<link rel="stylesheet" type="text/css" href="{yun:}$wap_style{/yun}/js/webapppic/css/mui.min.css?v={yun:}$config.cachecode{/yun}"/> 
<script src="{yun:}$wap_style{/yun}/js/webapppic/js/lrz6.mobile.min.js?v={yun:}$config.cachecode{/yun}" language="javascript"></script>  
<script src="{yun:}$wap_style{/yun}/js/webapppic/dist/lrz.all.bundle.js?v={yun:}$config.cachecode{/yun}" language="javascript"></script>  
<script src="{yun:}$wap_style{/yun}/js/webapppic/js/cropper.min.js?v={yun:}$config.cachecode{/yun}" language="javascript"></script>  
<script>
 $(function() {
        function toFixed2(num) {
            return parseFloat(+num.toFixed(2));
        }
    
        $('#cancleBtn').on('click', function() {
            $("#showEdit").fadeOut();
            $('#showResult').fadeIn();
        });

        $('#confirmBtn').on('click', function() {
            $("#showEdit").fadeOut();

            var $image = $('#report > img');
            var dataURL = $image.cropper("getCroppedCanvas");
            var imgurl = dataURL.toDataURL("image/jpeg", 0.5);
            $("#changeAvatar > img").attr("src", imgurl);
            $("#uimage").val(imgurl);
            $('#showResult').fadeIn();

        });

        function cutImg() {
            $('#showResult').fadeOut();
            $("#showEdit").fadeIn();
            var $image = $('#report > img');
            $image.cropper({
                aspectRatio: {yun:}$config.user_imgwidth{/yun} / {yun:}$config.user_imgheight{/yun},
                autoCropArea: 0.7,
                strict: true,
                guides: false,
                center: true,
                highlight: false,
                dragCrop: false,
                cropBoxMovable: false,
                cropBoxResizable: false,
                zoom: -0.2,
                checkImageOrigin: true,
                background: false,
                minContainerHeight: 400,
                minContainerWidth: 300
            });
        }

        function doFinish(startTimestamp, sSize, rst) {
            var finishTimestamp = (new Date()).valueOf();
            var elapsedTime = (finishTimestamp - startTimestamp); 

            var sourceSize = toFixed2(sSize / 1024),
                resultSize = toFixed2(rst.base64Len / 1024),
                scale = parseInt(100 - (resultSize / sourceSize * 100));
            $("#report").html('<img src="' + rst.base64 + '" style="width: 100%;height:100%">');
            cutImg();
        }

        $('#image').on('change', function() {
            var startTimestamp = (new Date()).valueOf();
            var that = this;
            lrz(this.files[0], {
                    width: 800,
                    height: 800,
                    quality: 0.7
                })
                .then(function(rst) { 
                    doFinish(startTimestamp, that.files[0].size, rst);
                    return rst;
                })
                .then(function(rst) { 
                    // 这里该上传给后端啦
                    // 伪代码：ajax(rst.base64)..
          //photo();
                    return rst;
                })
                .then(function(rst) {
                    // 如果您需要，一直then下去都行
                    // 因为是Promise对象，可以很方便组织代码 \(^o^)/~
                })
                .catch(function(err) {
                    // 万一出错了，这里可以捕捉到错误信息
                    // 而且以上的then都不会执行

                    alert(err);
                })
                .always(function() {
                    // 不管是成功失败，这里都会执行
                });
        });

    });
  
function photo(){ 
  var uimage=$("#uimage").val(); 
  if(uimage==''){
      layermsg('头像未改变，无需修改');return false;
  }
  var regS = new RegExp("\\+","gi"); 
  uimage=uimage.replace(regS,"#");
  $.ajax({ 
    type: 'POST', 
    url: "index.php?c=upload&a=uploadimg_save&token={yun:}$token{/yun}" ,
    cache:false,
    dataType:'json', 
    data: {uimage:uimage,submit:1} , 
    success: function(msg){
      if(msg.status =='1'){
        var date='操作成功！';
        $('#submit').val('上传成功!');
      }else{
        var date='操作失败！';
      }
      layermsg(date);
      return false;
    }
  });
} 
</script>

<section class="resume_mangage"> 
    <div class="clear"></div>
    <div class="verify">
    <div class="photo_i_box_v" style="background:#fff">
      <div id="showResult">
        <div id="changeAvatar" class="photo_i_box" style="text-align:center">
          <img src="{yun:}$photo{/yun}" width="80" height="100" style="margin-top:25px;">
        </div> 
        <div class="clear"></div>
        <div class="photo_i_box_in" style="width:130px; margin:0 auto; overflow:hidden"> 
                 <div class="yun_wap_addresume_box_ewm">
         <i class="user_ewm_photo_img"></i>
          <span class="user_ewm_photo_b"> 设置个人头像</span>
          
                  <input id="image" type="file" accept="image/*" class="user_ewm_photo_b_file">
          </div>
        </div>  
      </div>
      <div id="showEdit" style="display: none;width:100%;height: 100%;position: absolute;top:0;left: 0;z-index: 9;">
        <div style="width:100%;position: absolute;top:10px;left:0px;">
          <button class="mui-btn" data-mui-style="fab" id='cancleBtn' style="margin-left: 10px;">取消</button>
          <button class="mui-btn" data-mui-style="fab" data-mui-color="primary" id='confirmBtn' style="float:right;margin-right: 10px;">确定</button>
        </div>
        <div id="report"></div>     
      </div>
      <div style="width:98%; margin:40px auto 0;">
      <input type='hidden' name="txt" id="uimage" value="">
      <input name="submit" id="submit" type="button" onclick="photo()" value="保存/修改" class="photo_i_box_subbc"/>
      </div>
    </div> 
  </div>
</section>
<div class="clear"></div>
</div></div>
{yun:}include file="$wapstyle/footer.htm"{/yun} 
